<template>
  <el-card>
    <div class="header">
      <div class="left">
        <el-form label-width="80px">
          <el-form-item label="学科名称">
            <el-input v-model="formData.subjectName"
                      size="small"
                      style="width:180px " />
            <el-button type=""
                       size="small"
                       style="margin-left: 10px"
                       @click="handleCancel">取消</el-button>
            <el-button type="primary"
                       size="small"
                       style="background-color: #409eff; color:#fff"
                       @click="handleSearch">搜 索</el-button>

          </el-form-item>
          <el-form-item label="" />

        </el-form>
      </div>
      <div class="right">
        <el-button type="success"
                   size="small"
                   icon="el-icon-edit"
                   style="background: #67c23a; color: #fff"
                   @click="showAdd = true">
          新增学科
        </el-button>
      </div>
    </div>
    <!-- 文字提示 -->
    <el-alert :title="`${total}条消息`"
              type="info"
              show-icon
              :closable="false" />
    <el-table :data="subjectList">
      <el-table-column label="序号"
                       type="index"
                       :index="indexMethod" />
      <el-table-column label="学科名称"
                       prop="subjectName" />
      <el-table-column label="创建者"
                       prop="username" />
      <el-table-column label="创建日期"
                       prop="addDate" />
      <el-table-column label="前台是否显示">
        <template #default="{row}">
          {{ row.isFrontDisplay===0? '是': '否' }}
        </template>
      </el-table-column>
      <el-table-column label="二级目录"
                       prop="twoLevelDirectory" />
      <el-table-column label="标签"
                       prop="tags" />
      <el-table-column label="题目数量"
                       prop="totals" />
      <el-table-column label="操作"
                       width="230px">
        <template #default="{row}">
          <el-button type="text"
                     @click="$router.push(`/subjects/directorys?id=${row.id}`)">学科分类</el-button>
          <el-button type="text"
                     @click="$router.push(`/subjects/tags?id=${row.id}`)">学科标签</el-button>
          <el-button type="text"
                     @click="handleOpenEdit(row.id)">修改</el-button>
          <el-button type="text"
                     @click="handleSunDel(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination :current-page="query.page"
                     :page-sizes="[2, 3, 5, 10]"
                     :page-size="query.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </div>
    <el-dialog title="新增学科"
               width="30%"
               :visible="showAdd"
               @close="handleAddClose">

      <el-form :model="formData"
               label-width="80px">
        <el-form-item label="学科名称">
          <el-input v-model="formData.subjectName"
                    placeholder="请输入学科名称" />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch v-model="formData.isFrontDisplay"
                     :active-value="1"
                     :inactive-value="0"
                     active-color="#13ce66"
                     inactive-color="#ff4949" />

        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type=""
                   size="small"
                   @click="handleAddClose">取消</el-button>
        <el-button type="primary"
                   size="small"
                   style="background-color: #409eff; color:#fff"
                   @click="handleAdd">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog title="修改学科"
               width="30%"
               :visible="showEdit"
               @close="handleEditClose">

      <el-form :model="formData"
               label-width="80px">
        <el-form-item label="学科名称">
          <el-input v-model="formData.subjectName"
                    placeholder="请输入学科名称" />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch v-model="formData.isFrontDisplay"
                     :active-value="1"
                     :inactive-value="0"
                     active-color="#13ce66"
                     inactive-color="#ff4949" />

        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type=""
                   size="small"
                   @click="handleEditClose">取消</el-button>
        <el-button type="primary"
                   size="small"
                   style="background-color: #409eff; color:#fff"
                   @click="handleEdit">确定</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
import { getSubjectListAPI, delSubjectAPI, addSubjectAPI, editSubjectAPI, editAPI } from '@/api/subject'
import dayjs from 'dayjs'
export default {
  name: 'SubjectsListView',
  data () {
    return {
      subjectList: [],
      query: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      // 控制新增显示
      showAdd: false,
      formData: {
        subjectName: '',
        isFrontDisplay: 1
      },
      showEdit: false
    }
  },
  created () {
    this.getSubjectList()
  },
  methods: {
    // 获取学科列表
    async getSubjectList (subjectName = '') {
      const res = await getSubjectListAPI({ ...this.query, subjectName })
      console.log(res)
      this.subjectList = res.items
      this.total = res.counts
      this.subjectList.forEach(item => {
        item.addDate = dayjs(item.addDate).format('YYYY-MM-DD')
      })
    },
    indexMethod (index) {
      return (index + 1) + (this.query.page - 1) * this.query.pagesize
    },
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getSubjectList()
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.getSubjectList()
    },
    async handleSunDel (id) {
      try {
        await this.$confirm('确定删除嘛', '提示', {
          type: 'warning'
        })
        await delSubjectAPI(id)
        // console.log(res)
        this.getSubjectList()
        this.$message.success('删除成功')
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 关闭新增
    handleAddClose () {
      this.showAdd = false
    },
    // 新增学科
    async handleAdd () {
      await addSubjectAPI(this.formData)
      this.handleAddClose()
      this.$message.success('新增成功')
      this.getSubjectList()
    },
    // 关闭编辑
    handleEditClose () {
      this.showEdit = false
    },
    // 打开修改
    async handleOpenEdit (id) {
      this.editId = id
      this.showEdit = true
      const res = await editSubjectAPI(id)
      console.log(res)
      this.formData.subjectName = res.subjectName
      this.formData.isFrontDisplay = res.isFrontDisplay
    },
    // 修改
    async handleEdit () {
      await editAPI({
        id: this.editId,
        ...this.formData
      })
      this.handleEditClose()
      this.getSubjectList()
      this.$message.success('修改成功')
    },
    // 搜索
    handleSearch () {
      this.getSubjectList(this.formData.subjectName)
    },
    // 清空
    handleCancel () {
      this.formData.subjectName = ''
      this.getSubjectList()
    }
  }

}
</script>

<style scoped lang="scss">
/* .el-card {
  margin: 20px;
} */
.header {
  display: flex;
  justify-content: space-between;
}
.left {
  .el-form {
    display: flex;
  }
}
.page {
  display: flex;
  justify-content: right;
}
</style>
